<template>
	<div class="content font14">
    <!--广告-->
		<div class="banner_box">
			<v-banner></v-banner>
		</div>
    <div class="clearfix">
      <div class="content_left floatL">
        <div class="sc_website">
          <a><img src="../../common/img/scjj.png"/></a>
        </div>
        <!--视频板块-->
        <div class="video_index">
          <div class="plate_title">
            <div class="video_btn"><i></i>视频</div>
          </div>
          <video width="275" height="165">
            <!--<source src="myvideo.mp4" type="video/mp4"></source>
            <source src="myvideo.ogv" type="video/ogg"></source>
            <source src="myvideo.webm" type="video/webm"></source>-->
            <!--<object width="275" height="165" type="application/x-shockwave-flash" data="myvideo.swf">
              <param name="movie" value="myvideo.swf" />
              <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
            </object>
            当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>-->
          </video>
          <ul class="video_list">
            <li v-for="titles in videos"><i></i><a>{{titles.text}}</a></li>
          </ul>
        </div>
        <!--左边小广告-->
        <div style="width: 275px;height: 105px;margin-bottom: 35px"><img src="../../common/img/small_ad.png" style="width: 100%;height: 100%;" alt=""></div>
        <!--热点专题-->
        <div class="hot_topic">
          <div class="plate_title">
            <div class="video_btn"><i></i>热点专题</div>
          </div>
          <div class="hot_topic_picture">
            <a><img src="../../common/img/ad1.png" alt=""></a>
          </div>
          <div class="hot_topic_picture">
            <a><img src="../../common/img/ad2.png" alt=""></a>
          </div>
          <div class="hot_topic_picture">
            <a><img src="../../common/img/ad1.png" alt=""></a>
          </div>
          <div class="hot_topic_picture">
            <a><img src="../../common/img/ad2.png" alt=""></a>
          </div>
        </div>
      </div>
      <div class="content_right floatL clearfix">
			<div class="headlines_news">
        <img src="../../common/img/headlines_news.png" class="headlines_news_pic" alt="">
        <p class="headlines_news_title">我省携手央企打造国际一流“安全谷”</p>
        <p class="headlines_news_content">
          昨日，工业和信息化部与四川省政府联合举办的2017年全国应急产业发展推进交流会在成都世纪城国际会议中心拉开帷幕。
          新兴际华集团正式签约，明确将全面合作共同发展应急产业。值得一提的是，在成都启动打...
          <a class="headlines_news_detail">[详情]</a>
        </p>
      </div>
      <!--图片轮播-->
      <div class="picture_roasting_box floatR">
        <li><router-link to="/news">最新</router-link></li>
        owoerew
      </div>
      <!--最新播报-->
      <div class="latest_report_box floatR">
        <v-newReport></v-newReport>
      </div>
      <!--市州纵横-->
      <div class="city_state" >
        <v-economic imgFlag="2" :economicData="datas2"></v-economic>
      </div>
      <!--经济瞭望-->
      <div class="economic_outlook">
        <v-economic imgFlag="1" :economicData="datas2"></v-economic>
      </div>
      <!--最经济-->
      <div class="most_economical">
        <v-economic imgFlag="2" :economicData="datas2"></v-economic>
      </div>
      <!--企业动态-->
      <div class="enterprise_dynamic">
        <v-economic imgFlag="2" :economicData="datas2"></v-economic>
      </div>
		</div>
    </div>
    <div class="image_vision">
      <div class="image_vision_title floatL">
        影像视界
      </div>
      <div class="image_vision_picture floatL">
        11
      </div>
    </div>
	</div>
</template>

<script>
import banner from './banner'
import newReport from '../newReport/newReport'
import economic from '../newsSection/economic'

export default {
  data() {
    return {
      videos: [
        {'text': '我省携手央企打造国际一流“安全谷”'},
        {'text': '全产业链推动轨道交通产业发展'},
        {'text': '四川将探索建设内陆自由贸易港'},
        {'text': '米易发力农业供给侧改革 攀西裂谷盛开'},
        {'text': '米易发力农业供给侧改革 攀西裂谷盛开'}
      ],
      datas2: {
        title: '经济瞭望',
        text: 'dhaudyhaihdi',
        list: [
          {'text': '四川将探索建设内陆自由贸易港'},
          {'text': '米易发力农业供给侧改革 攀西裂谷盛开现代农业花'},
          {'text': '四川省社科院党委书记李后强到尔吉村调研并宣讲党'},
          {'text': '我省成立全国首家省级国有企业电商联盟'},
          {'text': '前三季度 成都城镇居民人均收入29343元'},
          {'text': '四川暖通空调职教联盟成立大会暨暖通论坛在蓉举行'}
        ]
      }
    }
  },
  components: {
    'v-banner': banner,
    'v-newReport': newReport,
    'v-economic': economic
  }
}
</script>

<style>
.content a:hover{
  color: #0790d2;
}
.content{
	width: 1100px;
	margin: 0 auto;
	overflow: hidden;
}
.content .content_left{
	width: 300px;
  margin-top: 35px;
}
.content .content_left,.content .content_right{
  margin-bottom: 35px;
}
.content .content_left .sc_website{
	width: 275px;
	height: 360px;
	border: solid 1px #ddd;
	margin-bottom: 35px;
}
.content .content_left .video_list li>i{
  width: 20px;
  height: 15px;
  display: inline-block;
  margin: 0 7px -2px 0;
  background: url("../../common/img/image.png") no-repeat -90px -8px;
}
.content .content_left .video_index video{
  margin-bottom: 6px;
  border: solid 1px #dddddd;
}
.content .content_left .video_index li{
  padding: 6px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.content .content_left .video_index .video_picture img{
  width:20px;
  height:14px;
  float: left;
  margin-right: 5px;
}
.content .content_left .sc_website img{
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.hot_topic .hot_topic_picture{
  height: 115px;
  background-color: #9c9c9c;
  margin-top: 10px;
}
.content .content_right{
	width: 800px;
  margin-top: 25px;
}
.content .banner_box{
	width: 1100px;
	height: 200px;
}
.headlines_news{
  width: 778px;
  float: right;
  height: 150px;
  background-color: #efeff0;
  vertical-align: bottom;
  position: relative;
  margin: 24px 0 17px 0;
}
.headlines_news_pic{
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  margin: auto;
  cursor: auto;
}
.headlines_news_title{
  font-size: 30px;
  font-weight: bold;
  margin-top: 55px;
  text-align: center;
}
.headlines_news_content{
  text-indent: 2em;
  line-height: 26px;
  height:53px;
  margin: 10px 10px 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.latest_report_box{
  width: 251px;
  height: 328px;
  border: solid 1px #99999a;
  margin: 0 22px 26px 0;
}
.picture_roasting_box{
  width: 505px;
  height: 328px;
}
.economic_outlook,.city_state,.most_economical,.enterprise_dynamic{
  width: 367px;
  height: 445px;
  margin-bottom: 20px;
  float: right;
}
.most_economical{
  margin: 11px 0 0 42px;
}
.enterprise_dynamic{
  margin: 11px 0 0 0;
}
.city_state{
  margin-left: 42px;
}
/*影像视界*/
.image_vision{
  height: 134px;
  border: solid 1px #b1c9d6;
}
.image_vision_title{
  width: 137px;
  height: 134px;
  background-color: #afc8d5;
}
</style>
